<template>
  <view class="home-container">
    <view class="header-container">
      <view class="left"><text class="iconfont icon-dingwei1"></text> 杭州</view>
      <view class="center">首页</view>
      <view class="right">晴/30℃</view>
    </view>
    <view class="main-container">
      <view class="topcolor-container"></view>
      <view class="swiper-container">
        <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="true"
          :interval="2000"
          :duration="500"
        >
          <swiper-item v-for="banner in bannerList" :key="banner.id">
            <view class="swiper-item">
              <img :src="banner.images_url" alt />
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="message-container">
        <view class="message">
          <view class="icon">
            <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/operation_app/index_imgs/new.png'" style="width:28px;height:28px" />
          </view>
          <view class="content">
            <view class="news-container" @tap="toQrcodePage">
              <view class="news-icon">·</view>
              <view class="news-content">订单核销</view>
            </view>
          </view>
        </view>
      </view>
      <view class="tabs-container">
        <view class="tab">
          <view :class="tabIndex === 'order' ? 'active' : ''">游园订单</view>
        </view>
        <view class="tab">
          <view :class="tabIndex === 'report' ? 'active' : ''">报修列表</view>
        </view>
      </view>
      <view class="tab-content-container">
        <view class="order-container" v-if="tabIndex === 'order'">
          <view class="order" v-for="order in orderList" :key="order.id">
            <view class="imgage-container">
              <img :src="order.img_url" alt="">
            </view>
            <view class="content-container">
              <view class="title">{{ order.title }}</view>
              <view class="user">{{ order.user }}</view>
              <view class="time">{{ order.time }}</view>
            </view>
          </view>
        </view>
        <view class="reportList">
          <view class="report" v-for="report in reportList" :key="report.id">
            <view :class="report.status ? 'state-bar' : 'state-bar'"></view>
            <view class="content">
              <view class="title">{{ report.user }}</view>
              <view class="message">{{ report.content }}</view>
              <view class="time">{{ report.time }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      tabIndex: "order",
      orderList: [
        {
          id: "0320",
          title: "订单一",
          user: "用户一",
          time: "2020-10-11 12:00"
        },
        {
          id: "0321",
          title: "订单二",
          user: "用户二",
          time: "2020-10-11 12:00"
        }
      ],
      reportList: [
        {
          id: "0023",
          user: "周舟船",
          content: "西环北路路口第37号路灯出现故障",
          time: "2020-10-11 12:00"
        },
        {
          id: "0024",
          user: "周舟船",
          content: "西环北路路口第37号路灯出现故障",
          time: "2020-10-11 12:00"
        }
      ]
    }
  },
	methods: {
		toQrcodePage() {
			uni.navigateTo({
				url: "/pages/qrcode/check"
			})
		}
	}
})
</script>
<style scoped>
.home-container {
  width: 100vw;
  height: 100vh;
}

.header-container {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  background: #006b65;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .right {
  flex-direction: row-reverse;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>